<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">事件详情</div>
    <div class="app-detail">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content app-detail-title">事件编号</div>
        </el-col>
        <el-col :span="21">
          <div class="grid-content app-detail-cont">
            {{ detailData.eventId }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content app-detail-title">所属</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">{{ fullAreaName }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content app-detail-title">场景</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">{{ fullModuleName }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content app-detail-title">处理状态</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">{{ eventStateToText }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content app-detail-title">
            {{ detailData.eventTypeName }}
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">
            <span>{{ detailData.eventValue }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content app-detail-title">报警时间</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">
            {{ detailData.eventTime }}
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content app-detail-title">处理时长</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">{{ timeConvert }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content app-detail-title">提交类型</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">{{ submitTypeToText }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content app-detail-title">来源</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">
            {{ detailData.submitPerson }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content app-detail-title">查看位置</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">
            经度:{{ detailData.gpsLng }}, 纬度{{ detailData.gpsLat }}
            <el-button class="detail-showMap" type="text" icon="el-icon-location" @click="showMap(detailData.gpsLng, detailData.gpsLat)">地图位置
            </el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content app-detail-title">关联设备ID</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content app-detail-cont">
            {{ detailData.equipmentId }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content app-detail-title">图片</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content">
            <span v-for="(item, index) in picData" :key="index" class="eventImage" @click="showPic(item.imgUrl)"><img style="height: 100px" :src="item.imgUrl" /></span>
            &nbsp;
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content app-detail-title">视频</div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content">
            <video @click="playVideo(detailData.eventVideo)" height="100" :src="detailData.eventVideo"></video>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="grid-content app-detail-title">地址</div>
        </el-col>
        <el-col :span="21">
          <div class="grid-content app-detail-cont">
            {{ detailData.eventContent }}
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog top="0" custom-class="pic-popup" :visible.sync="dialogTableVisible">
      <img :src="picUrl" />
    </el-dialog>
    <el-dialog top="0" custom-class="pic-popup" :visible.sync="mapVisible">
      <mapSelect :LngLat="lngLat" :MapClick="mapClick"></mapSelect>
    </el-dialog>
    <el-dialog title="视频预览" :visible.sync="videoIsShow">
      <video controls style="width: 100%;height: 400px;" :src="currentVideo"></video>
    </el-dialog>
  </div>
</template>

<script>
import mapSelect from '../../components/common/ui/mapSelect'

export default {
  name: 'eventSearchDetail',
  components: {
    mapSelect
  },
  data () {
    return {
      gHeight: this.$store.state.gHeight,
      detailData: {
        eventId: '', // 事件编号
        areaName: '', // 所属
        moduleName: '', // 场景
        submitType: '', // 提交类型
        eventState: '' // 处理状态
      },
      fullModuleName: '', // 场景全名
      fullAreaName: '', // 所属全名
      mapClick: false, // 地图标注点是否可切换
      lngLat: { lng: 121.423224, lat: 31.223914 }, // 地图标注点的位置
      dialogTableVisible: false, // 图片弹窗默认不显示
      picUrl: '', // 当前选择图片的地址
      picData: [], // 图片数据
      mapVisible: false, // 地图是否显示
      videoIsShow: false,
      currentVideo: ''
    }
  },

  computed: {
    submitTypeToText: function () {
      return this.$base.getNameByConst(
        'select',
        'submitType',
        this.detailData.submitType
      )
    },
    eventStateToText: function () {
      return this.$base.getNameByConst(
        'select',
        'eventState',
        this.detailData.eventState
      )
    },
    timeConvert: function () {
      return this.$base.timeConvert(this.detailData.eventTime)
    }
  },

  beforeRouteLeave (to, from, next) {
    if (to.name !== 'eventSearch') {
      this.$store.commit('keepOut')
    }
    next()
  },

  beforeRouteEnter (to, from, next) {
    next(vm => {
      let url = vm.$base.getUrl('infoById')
      if (!to.query) {
        return
      }
      let params = {
        url: url + '/' + to.query.eventSysId
      }

      vm.$store.dispatch('postForm', params).then(res => {
        let data = res.content
        vm.detailData = data

        let arr = vm.$base.transCoordinate(
          data.gpsLng,
          data.gpsLat,
          data.mapType
        )
        let arr1 = arr[0]
        let arr2 = arr[1]
        vm.detailData.gpsLng = arr1 ? parseFloat(arr1).toFixed(6) : 0
        vm.detailData.gpsLat = arr2 ? parseFloat(arr2).toFixed(6) : 0
        // vm.detailData.gpsLng = arr[0].toFixed(6)
        // vm.detailData.gpsLat = arr[1].toFixed(6)

        let areaName1 = data.areaName1 || ''
        let areaName2 = data.areaName2 ? ' - ' + data.areaName2 : ''
        let areaName3 = data.areaName3 ? ' - ' + data.areaName3 : ''
        vm.fullAreaName = areaName1 + areaName2 + areaName3
        let moduleName1 = data.moduleName1 || ''
        let moduleName2 = data.moduleName2 ? ' - ' + data.moduleName2 : ''
        vm.fullModuleName = moduleName1 + moduleName2
        if (data.eventImage !== undefined) {
          if (data.moduleCode === '1002') {
            vm.picData = [{ imgUrl: data.eventImage }]
          } else {
            vm.picData = JSON.parse(data.eventImage).result
          }
        }
      })
    })
  },

  methods: {
    showPic (url) {
      this.dialogTableVisible = true
      this.picUrl = url
    },
    showMap (lng, lat) {
      this.mapVisible = true
      this.lngLat.lng = lng
      this.lngLat.lat = lat
    },
    playVideo (src) {
      this.currentVideo = src
      this.videoIsShow = true
    }
  }
}
</script>

<style scoped>
.app-detail-cont span {
  color: #f60;
}

.eventImage {
  position: relative;
  display: inline-block;
  transform: translate(0, 12px);
  margin-right: 6px;
  cursor: pointer;
}

.eventImage img {
  display: block;
  max-height: 100px;
}

.el-dialog__wrapper >>> .pic-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  margin: 0;
}

.el-dialog__wrapper >>> .el-dialog__body {
  padding: 20px;
}

.el-dialog__wrapper >>> .el-dialog__header {
  padding: 10px 20px 10px;
}

.el-dialog__wrapper >>> .el-dialog__headerbtn {
  top: 10px;
}

.detail-showMap {
  margin-left: 20px;
}
</style>
